<template>
  <div>
    <header class="head-section">
      <div class="focus-actor"></div>
    </header>
    <video autoplay muted id="videoElement"></video>
  </div>
</template>

<script>
import flvjs from "flv.js";
export default {
  data() {
    return {
      liveDetails: null, //直播间详情
      url: "",
    };
  },

  created() {
    this.getLiveDetails();
  },
  mounted() {},
  methods: {
    // 获取直播间详情
    async getLiveDetails() {
      const {
        data: { data: res },
      } = await this.axios.get(
        `/live/actorLiveInfo?roomId=${this.$route.query.roomId}&actorId=${this.$route.query.actorId}`
      );
      this.liveDetails = res;
      this.createVideo();
      console.log(this.liveDetails);
    },
    createVideo() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById("videoElement");
        // var videoElement = this.$refs.videoElement;
        console.log(videoElement);
        var flvPlayer = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          hasAudio: true,
          url: this.liveDetails.liveUrl,
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.head-section {
  padding: top 9px;
  padding-left: 5px;
  background-image: -webkit-linear-gradient(
    bottom,
    transparent,
    rgba(0, 0, 0, 0.02) 18%,
    rgba(0, 0, 0, 0.6)
  );
  background-image: linear-gradient(
    0deg,
    transparent,
    rgba(0, 0, 0, 0.02) 18%,
    rgba(0, 0, 0, 0.6)
  );
}
video {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}
</style>